<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/1shouye.css" />
		<link rel="stylesheet" type="text/css" href="font_2194706_mu5lgewh94/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="css/2.submit.css" />
	</head>
	<body>
		<!-- 1.阻止a标签跳转的方法好像是:<a href="" javascript=";"> -->
		<!-- 2.获取select option里面值的方法:$("select").find("option:selected").text()   写值：就往text(里面添加) -->
		
		
		
		
		
		<!-- 弹出框 -->
		<div id="Tbox">
			<div id="Tbox-H">
				兰蔻会员欢迎您,注册享积分,登录享礼遇!
			</div>

			<div id="Tbox-all">
				<div id="logon">
					<h1 class="logon-h1">登录</h1>
					<!-- 登录下面的部分 -->
					<div id="logon-all">
						<p>
							<span>手机号/邮箱*</span>
							<input type="text" placeholder="手机号/邮箱" style="text-indent: 2em;" class="email"/></br>
						</p>
						<p>
							<span>密码*</span>
							<input type="text" placeholder="请填写密码" style="text-indent: 2em;" class="password"/></br>

						</p>
						<button type="button" class="enroll">登录</button>
						<div id="logon-b">
							<span>短信验证码登录</span>
							<a href="https://www.lancome.com.cn/member/forgetpassword/page?isNewMem=true">忘记密码</a>
							<p>使用第三方账号登录</p>
						</div>
					</div>

				</div>
				<!-- 注册 -->
				<div id="login">
					<h1 class="login-h1">注册</h1>
					<!-- 注册下半部分 -->
					<!-- 第一个页面 -->
					<div id="login-all">
						<p>兰蔻品牌会员尊享权益</p>
						<p>欢迎来到兰蔻官网，您将尊享专属权益</p>
						<ul>
							<li>兰蔻品牌会员独家礼赠</li>
							<li>会员积分兑礼</li>
							<li>生日专宠礼</li>
						</ul>
					</div>
					
				</div>
				<!-- 注册的第二个页面 -->
				<div id="sub">
					<div id="submit">
						<div id="submit-left">
							<div id="">
								<span>手机号*</span>
								<input type="text" placeholder="手机号" style="text-indent: 2em;" class="phone"/></br>
							</div>
							<div id="">
								<span>密码*</span>
								<input type="text" placeholder="请填写密码"/ style="text-indent: 2em;" class="pwd1"></br>
							</div>
							
							<div id="">
								<span>确认密码*</span>
								<input type="text" placeholder="请再次输入你的密码" style="text-indent: 2em;" class="pwd2"/></br>
							</div>
							
						</div>
						<div id="submit-right">
							<div id="">
								<span>验证码*</span>
								<input type="text" placeholder="输入验证码" style="text-indent: 2em;"/></br>
							</div>
							
							<div id="">
								<span>短信验证码*</span>
								<input type="text" placeholder="短信验证码" style="text-indent: 2em;"/></br>
							</div>
							
						</div>
					</div>
					<!-- 下面 -->
					<div id="submit-b">
						<span></span>
						<span>我同意依照本条例和隐私政策ss对我的个人信息进行收集和使用;我已阅读并确认被给予充分机会理解该使用条款和隐私政策的内容</span>
					</div>
					<!-- 最下面 -->
					<div id="submit-f">
						<button type="button" class="regist">立即注册</button>
						<a href="">邮箱注册</a>
					</div>
					
				</div>
				
				
			</div>

		</div>
		
		
		
		
		
		<!-- 头部 -->
		<header>
			<div id="header-con">
				<img src="imgs/logo@2x.png">
				<ul>
					<li class="nav">首页</li>
					<li class="nav">护肤</li>
					<li class="nav">彩妆</li>
					<li class="nav wash wash-next">香水
						<div id="wash-con">
							<ul>
								<li>
									<h3>女士香水</h3>
								</li>
								<li class="wash-line wash-next">美丽人生系列</li>
								<li class="wash-line wash-next">奇迹系列</li>
								<li class="wash-line wash-next">真爱系列</li>
								<li class="wash-line wash-next">殿堂系列</li>
							</ul>
							<dl>
								<dt><img src="imgs/wash.jpg"></dt>
								<dd>
									<h3>美丽人生香水</h3>
								</dd>
								<dd>快乐因你而生&gt;</dd>
							</dl>
						</div>
					</li>
					<li class="nav">双11狂欢<span></span>
						<b>hot</b></li>
					<li class="nav">双11必囤套装<span></span>
						<b>hot</b></li>
					<li class="nav">双11攻略<span></span><b>hot</b></li>
					<li class="nav">青春奢宠<span></span><b>hot</b></li>
					<li class="nav">会员中心</li>
				</ul>
				<div id="last">
					<span class="iconfont icon-sousuo"></span>
					<span class="iconfont icon-gouwudai"></span>
					<span class="iconfont icon-lianxiren">

					</span>

				</div>
			</div>
		</header>

		<!-- 第一部分 -->
		<div id="one">
			<!-- 头部 -->
			<div id="top">

				<img src="imgs/logo@2x.png" class="first">
				<div id="top-bottom">
					<ul>
						<li>首页</li>
						<li>护肤</li>
						<li>彩妆</li>
						<li class="wash wash-next">香水
							<div id="wash-con">
								<ul>
									<li class="wash-line wash-next">
										<h3>女士香水</h3>
									</li>
									<li class="wash-line wash-next">美丽人生系列</li>
									<li class="wash-line wash-next">奇迹系列</li>
									<li class="wash-line wash-next">真爱系列</li>
									<li class="wash-line wash-next">殿堂系列</li>
								</ul>
								<dl>
									<dt><img src="imgs/wash.jpg"></dt>
									<h3>美丽人生香水</h3>
									<dd>快乐因你而生&gt;</dd>
								</dl>
							</div>
						</li>
						<li>双11狂欢<span>hot</span></li>
						<li>双11必囤套装<span>hot</span></li>
						<li>双11攻略<span>hot</span></li>
						<li>青春奢宠<span>hot</span></li>
						<li>会员中心</li>
					</ul>
					<div id="last">
						<span class="iconfont icon-sousuo"></span>
						<span class="iconfont icon-gouwudai"></span>
						<span class="iconfont icon-lianxiren"></span>
					</div>
				</div>
			</div>

			<!-- 轮播图的ul和input -->
			<div id="one-ul">
				<ul>
					<li class="bot"></li>
					<li class="bot"></li>
					<li class="bot"></li>
					<li class="bot"></li>
					<li class="bot"></li>
				</ul>
				<img src="imgs/kv-left.png" id="btn-first">
				<img src="imgs/kv-right.png" id="btn-next">
			</div>
		</div>


		<!-- 中间部分 -->
		<div id="banner">
			<div id="banner-con-top">
				<h1>双11狂欢 明星系列推荐</h1>

			</div>
			<ul class="banner-con-center">
				<li>双11狂欢<span>|</span></li>
				<li>菁纯系列<span>|</span></li>
				<li>小黑瓶系列<span>|</span></li>
				<li>极光系列<span>|</span></li>
				<li>塑颜系列<span>|</span></li>
				<li>水分颜系列</li>

			</ul>

			<div id="banner-con-bottom">

			</div>
		</div>


		<!-- 下面 -->
		<div id="footer">
			<div id="footer-con">
				<h2>兰蔻中国官方网站</h2>
				<div id="footer-con-center">
					<dl>
						<dt><img src="imgs/footer-1.png"></dt>
						<h5>正品保证</h5>
						<dd>官方直供原装</dd>
					</dl>
					<dl>
						<dt><img src="imgs/footer-2.png"></dt>
						<h5>顺丰包邮</h5>
						<dd>港澳台偏远地区除外亦可提供</dd>
					</dl>
					<dl>
						<dt><img src="imgs/footer-3.png"></dt>
						<h5>精品礼盒</h5>
						<dd>甄选精美礼盒包装</dd>
					</dl>
					<dl>
						<dt><img src="imgs/footer-4.png"></dt>
						<h5>关注公众号</h5>
						<dd>了解品牌最新信息</dd>
					</dl>

				</div>
				<div id="footer-con-bottoms">
					<ul>
						<li>
							<h5>关于我们</h5>
						</li>
						<li class="color">加入兰蔻</li>
						<li class="color">会员中心</li>
					</ul>
					<ul>
						<li>
							<h5>联系我们</h5>
						</li>
						<li class="color">线上美容顾问</li>
						<li class="color">客服热线:400-820-8016</li>
					</ul>
					<ul>
						<li>
							<h5>配送及退货</h5>
						</li>

					</ul>
					<ul>
						<li>
							<h5>专柜查询</h5>
						</li>

					</ul>
					<ul>
						<li>
							<h5>关注我们</h5>
						</li>
						<li class="color img">官方微信</li>
						<li class="color img">官方微博</li>
					</ul>

				</div>
				<div id="footer-con-emil">
					<p>电子邮件</p>
					<input type="text" placeholder="*请输入你的邮箱" />
				</div>
			</div>
		</div>

		<!-- 尾部 -->
		<div id="end">
			<p>国家药监局提醒您:宣称用于祛斑美白,防晒,染发,烫发等的化妆品为特殊用途化妆品,产品标签上应标注"国妆特字"或者"国妆特进字"的标准文号</p>
			<p>&copy;欧莱雅中国版权有限公司 中国供商户ICP备081000043号-34</p>
			<ul>
				<li>使用条款<span>|</span></li>
				<li>Cookies隐私<span>|</span></li>
				<li>隐私政策</li>
			</ul>
			<p class="end-p">浏览该网站表示您接收并同意我们使用Cookies为您提供个性化的浏览体验。点击<a href="https://policy.lorealchina.com/cookiespolicy"
				 target="_blank">Cookies政策</a>了解详情</p>
		</div>



		<!-- 右侧导航栏 -->
		<div id="right">
			<img src="./imgs/back-top.png" class="back-top">
			<img src="./imgs/back-info.png" class="back-info">
		</div>
	</body>
</html>
<script src="js/jQuery.js"></script>
<script src="js/1shouye.js"></script>
<script src="js/2.tanchukuang.js"></script>
<script src="js/2.tanjQuery.js"></script>
<script src="js/3regist.js"></script>
<script>
	// 首页的滚动条显现
	scroll();

	// 首页轮播图的显现
	let oDiv = document.querySelector("#one");
	let oLis = document.querySelectorAll(".bot");
	let b = new Banner(oDiv, oLis);
	b.bingEvent();
	b.change();


	// 返回顶部
	oBack();


// 登录注册页面弹出框
	let oBox = document.querySelector("#Tbox");
	let oSpan = document.querySelectorAll(".icon-lianxiren");
	let p = new Pop(oBox);

	oSpan[0].onclick = function() {
		// console.log(1)
		p.bind();
		// oBox.style.display = "block";
	}
	oSpan[1].onclick = function() {
		// console.log(1)
		p.bind();
		// oBox.style.display = "block";
	}
	
	
	// 点击香水跳转到下一个页面
	$(".wash-next").click(function(){
		location.href="3list.html";
	})
	
</script>
